<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件判断</title>
</head>

<body>
    <div id="app">
        <div> <samp>status:</samp>
            <input type="radio" id="one" value="1" v-model="status"><label for="one">1</label>
            <input type="radio" id="two" value="2" v-model="status"><label for="one">2</label>
            <input type="radio" id="three" value="3" v-model="status"><label for="one">3</label>
        </div>
        <p v-if='status==1'>当status为1的时候显示该行</p>
        <p v-else-if='status==2'>当status为2的时候显示该行</p>
        <p v-else>否则显示该行</p>
        <br>
        <br>
        <div v-if="type==='name'">
            <label>用户名：</label><input type="text" placeholder="输入用户名">
        </div>
        <div v-else-if="type==='mail'">
            <label>邮箱：</label><input type="text" placeholder="输入邮箱">
        </div>
        <button @click='handleToggleClick'>切换类型</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                status: '1',
                type: 'name',
            },
            methods: {
                handleToggleClick: function() {
                    this.type = this.type === 'name' ? 'mail' : 'name'
                }
            }
        })
    </script>
</body>

</html>